/**
 * 地域选择组件
 */

import React from 'react';
import Group from './Group.jsx';

import filterStyle from './Filter.less';

import SelectField from 'material-ui/lib/select-field';
import MenuItem from 'material-ui/lib/menus/menu-item';

const noop = function() { };
const selectFieldStyle = {
	width: 150
};

export default class AreaGroup extends React.Component {

	// 设置属性默认值
	static defaultProps = {
		provinces: [], 
		onProvinceChange: noop,
		cities: [], 
		onCityChange: noop,
		counties: [], 
		onCountyChange: noop,
		schools: [],
		onSchoolChange: noop,
	};

	constructor(props) {
		super(props);
	}

	// 处理选择变化
	handleChange(key, value) {
		if (key == 'province') {
			let { onProvinceChange } = this.props;
			onProvinceChange(value);
		} else if (key == 'city') {
			let { onCityChange } = this.props;
			onCityChange(value);
		} else if (key == 'county') {
			let { onCountyChange } = this.props;
			onCountyChange(value);
		} else if (key == 'school') {
			let { onSchoolChange } = this.props;
			onSchoolChange(value);
		}
	}

	render() {
		let { provinces, cities, counties, schools, ...others } = this.props;
		let { selectedProvince, selectedCity, selectedCounty, selectedSchool } = others;

		return (
			<Group name='地域'>
				<SelectField
					style={selectFieldStyle}
					value={selectedProvince}
					onChange={(event, index, value) => { 
						this.handleChange('province', value)
					}}
					floatingLabelText='省份'
				>
					{
						provinces.map((item, index) => 
							<MenuItem 
								primaryText={item.name} 
								key={index} 
								value={item.enum} />)
					}
				</SelectField>
				<SelectField
					style={selectFieldStyle}
					value={selectedCity}
					onChange={(event, index, value) => { 
						this.handleChange('city', value)
					}}
					floatingLabelText='市'
				>
					{
						cities.map((item, index) => 
							<MenuItem
								primaryText={item.name}
								key={index}
								value={item.enum} />)
					}
				</SelectField>
				<SelectField
					style={selectFieldStyle}
					value={selectedCounty}
					onChange={(event, index, value) => { 
						this.handleChange('county', value)
					}}
					floatingLabelText='县区'
				>
					{
						counties.map((item, index) => 
							<MenuItem
								primaryText={item.name}
								key={index}
								value={item.enum} />)
					}
				</SelectField>
				<SelectField
					value={selectedSchool}
					onChange={(event, index, value) => { 
						this.handleChange('school', value)
					}}
					floatingLabelText='学校'
				>
					{
						schools.map((item, index) => 
							<MenuItem
								primaryText={item.name}
								key={index}
								value={item.enum} />)
					}
				</SelectField>
			</Group>
		);
	}
}